const qilian_article = {
    props: ['listid'],
    template: `
<div class="wrap">
    <div 
    class="article"
    v-show="whichShow==0">
        <div 
        class="article-item"
        v-if="articles.length"
        v-for="(article, index) in articles"
        v-show="listid==0 || article.belong.indexOf(listid+'')!=-1"
        :key="article.id">
            <div class="article-cont">
                <span class="num-style">{{index}}</span>
                <span class="title-style">{{article.title}}</span>
                <span>|</span>
                <span>序列号：{{article.id}}</span>
                <span>|</span>
                <span>缩略名：{{article.slug}}</span>
                <span>|</span>
                <span>创建者：{{article.user_name}}</span>
                <span>|</span>
                <span>类型：{{article.type==0?'已发布':'草稿'}}</span>
                <span>|</span>
                <span class="num-style">
                所属分类：<span v-show="article.belong.length==0">暂无</span>
                <span v-for="(name, idx) in article.belongname" :style="{color: article.belong[idx]==listid?'red':'#676767'}">#{{name}}</span>
                </span>
                <span>|</span>
                <span>创建时间：{{article.created_time}}</span>
                <span>|</span>
                <span>修改时间：{{article.updated_time}}</span>
            </div>
            <div class="article-oper">
                <button 
                class="article-change button-secondary button-hover"
                @click="openPannel(2, index)">查阅</button>
                <button 
                class="article-change button-warning button-hover"
                @click="openPannel(1, index)">修改</button>
                <button 
                class="article-change button-error button-hover"
                @click="deleteArticle(index)">删除</button>
            </div>
        </div>
        <div v-else>暂无数据</div>
    </div>

    <div 
    class="pannel" 
    v-show="whichShow==1">
        <div class="pannel-each" v-show="whichPannel==0">
            <qilian-tip type="red" right="2rem" bottom="2rem">{{addMsg}}</qilian-tip>
            <div class="pannel-close">
                <div class="add-form-title">添加文章</div>
                <button 
                class="pannel-close-item button-hover button-primary"
                @click="closePannel">取消添加</button>
            </div>
            <div class="add-form">
                <form class="add-form-main" @submit.prevent="nextStep">
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="title"
                        placeholder="请输入文章名" 
                        @input="getJP"
                        autocomplete="off"
                        required="required">
                    </div>
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="slug"
                        placeholder="请输入缩略名" 
                        autocomplete="off"
                        required="required">
                    </div>
                    <div class="add-form-item list-select">
                        <div
                        class="list-select-item"
                        v-for="(list, index) in lists"
                        :key="list.id">
                            <input
                            type="checkbox" 
                            :id="'list-'+list.id"
                            v-model="checkedList" 
                            :value="list.id"><label 
                            :for="'list-'+list.id">{{list.name}}</label>               
                        </div>                
                    </div>
                    <div class="add-form-item add-form-item_left">
                        <button 
                        class="button-primary button-hover"
                        type="submit"
                        >下一步</button>
                    </div>    
                </form>
            </div>
        </div>

        <div class="pannel-each" v-show="whichPannel==3">
            <qilian-tip type="red" right="2rem" bottom="2rem">{{addMsg}}</qilian-tip>
            <div class="attach">
                <div class="attach-toggle" @click="isAttach=!isAttach">附件</div>
                <div class="attach-main" v-show="isAttach" v-if="articles.length">
                    <div
                    class="attach-item"
                    v-for="(item, index) in articles[articleIndex].attachments"
                    :key="item.id">
                    <span class="num-style">{{index}}</span>
                    <span class="attach-text" @click="copy(item.title)">{{item.title}}</span>
                    <span class="attach-del" @click="delAttachment(index)">删除</span>
                    </div>
                </div>
                <div class="attach-main" v-else v-show="isAttach">暂无</div>
            </div>

            <div class="pannel-close">
                <div class="add-form-title">编辑文章内容</div>
                <button 
                class="pannel-close-item button-hover button-primary"
                @click="closePannel">关闭</button>
            </div>
            <div class="add-form">
                <form class="add-form-main">
                    <div class="add-form-item">
                        <div ref="cont">
                            <p>在这里输入内容</p>
                        </div>
                    </div> 
                    <div class="add-form-item add-form-item_left">
                        <button 
                        class="button-primary button-hover"
                        type="button"
                        @click="publish(0)">发布</button>
                        <button 
                        class="button-success button-hover"
                        type="button"
                        @click="publish(1)">保存为草稿</button>
                    </div> 
                </form>
            </div>
        </div>

        <div class="pannel-each" v-show="whichPannel==1">
            <qilian-tip type="red" right="2rem" bottom="2rem">{{updateMsg}}</qilian-tip>
            <div class="attach">
                <div class="attach-toggle" @click="isAttach=!isAttach">附件</div>
                <div class="attach-main" v-show="isAttach" v-if="articles.length">
                    <div
                    class="attach-item"
                    v-for="(item, index) in articles[index].attachments"
                    :key="item.id">
                    <span class="num-style">{{index}}</span>
                    <span class="attach-text" @click="copy(item.title)">{{item.title}}</span>
                    <span class="attach-del" @click="delAttachment(index)">删除</span>
                    </div>
                </div>
                <div class="attach-main" v-else v-show="isAttach">暂无</div>
            </div>


            <div class="pannel-close">
                <div class="add-form-title">修改</div>
                <button 
                class="pannel-close-item button-hover button-primary"
                @click="closePannel">取消修改</button>
            </div>
            <div class="add-form">
                <form class="add-form-main" @submit.prevent="">
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="mTitle"
                        placeholder="请输入文章名" 
                        @input="getMJP"
                        autocomplete="off"
                        required="required">
                    </div>
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="mSlug"
                        placeholder="请输入缩略名" 
                        autocomplete="off"
                        required="required">
                    </div>
                    <div class="add-form-item list-select">
                        <div
                        class="list-select-item"
                        v-for="(list, index) in lists"
                        :key="list.id">
                            <input
                            type="checkbox" 
                            :id="'mlist-'+list.id"
                            v-model="mCheckedList" 
                            :value="list.id"><label 
                            :for="'mlist-'+list.id">{{list.name}}</label>               
                        </div>                
                    </div>
                    <div class="add-form-item">
                        <div ref="mCont">
                            <p></p>
                        </div>
                    </div>
                    <div class="add-form-item add-form-item_left">
                        <button 
                        class="button-primary button-hover"
                        type="submit"
                        @click="updateArticle(0)"
                        >发布</button>
                    </div>
                    <div class="add-form-item add-form-item_left">
                        <button 
                        class="button-success button-hover"
                        type="submit"
                        @click="updateArticle(1)"
                        >保存为草稿</button>
                    </div>       
                </form>
            </div>
        </div>

        <div class="pannel-each pannel-article" v-show="whichPannel==2">
            <div class="pannel-close">
                <div class="add-form-title" v-if="articles.length && isShow">{{articles[index].title}}</div>
                <div v-else>暂无数据</div>
                <button 
                class="pannel-close-item button-hover button-primary"
                @click="closePannel">关闭</button>
            </div>
            <div class="show-article" v-if="articles.length && isShow">
                <div v-html="articles[index].text"></div>
            </div>
            <div v-else>暂无数据</div>
        </div>
    </div>

    <button 
    class="list-add button-primary"
    @click="openPannel(0)"
    v-show="whichShow==0">添加文章</button>
</div>
    `,
    data: function() {
        return {
            userinfo: {},

            whichShow: 0,
            whichPannel: 0,

            addMsg: '请输入',
            updateMsg: '请输入',

            articles: [],

            title: '',
            slug: '',
            type: 0,

            mTitle: '',
            mSlug: '',
            mType: '',
            mCheckedList: [],

            articleId: 0,
            articleIndex: 0,
            isShow: false,

            index: 0,

            lists: [],
            checkedList: [],

            isAttach: false
        }
    },
    created: function() {
        this.userinfo = JSON.parse(localStorage.getItem('userinfo'));
        this.$options.methods.getArticle(this);
        this.$options.methods.getList(this);
    },
    mounted: function() {
        const that = this;
        const E = window.wangEditor;

        this.editor = new E(this.$refs.cont);
        this.editor.config.excludeMenus = [
            'video',
            'emoticon'
        ];
        this.editor.config.showFullScreen = true;
        this.editor.config.height = 320;
        this.editor.config.uploadImgServer = this.$host + 'uploadImage.php';
        this.editor.config.uploadImgMaxLength = 5;
        this.editor.config.showLinkImgAlt = false;
        this.editor.config.showLinkImgHref = false;
        this.editor.config.uploadImgHooks = {
            // 图片上传并返回了结果，图片插入已成功
            success: function(xhr) {
                that.articles[that.articleIndex].attachments = that.articles[that.articleIndex].attachments.concat(JSON.parse(xhr.response).data);
            },
            // 图片上传并返回了结果，但图片插入时出错了
            fail: function(xhr, editor, resData) {
                that.articles[that.articleIndex].attachments = that.articles[that.articleIndex].attachments.concat(JSON.parse(xhr.response).data);
            }
        }
        this.editor.create();
        this.$refs.cont.addEventListener('input', () => {
            this.editor.fullScreen();
        });


        this.mEditor = new E(this.$refs.mCont);
        this.mEditor.config.excludeMenus = [
            'video',
            'emoticon'
        ];
        this.mEditor.config.showFullScreen = true;
        this.mEditor.config.height = 260;
        this.mEditor.config.uploadImgServer = this.$host + 'uploadImage.php';
        this.mEditor.config.uploadImgMaxLength = 5;
        this.mEditor.config.showLinkImgAlt = false;
        this.mEditor.config.showLinkImgHref = false;
        this.mEditor.config.uploadImgHooks = {
            // 图片上传并返回了结果，图片插入已成功
            success: function(xhr) {
                that.articles[that.index].attachments = that.articles[that.index].attachments.concat(JSON.parse(xhr.response).data);
            },
            // 图片上传并返回了结果，但图片插入时出错了
            fail: function(xhr, editor, resData) {
                that.articles[that.index].attachments = that.articles[that.index].attachments.concat(JSON.parse(xhr.response).data);
            }
        }
        this.mEditor.create();
        this.$refs.mCont.addEventListener('input', () => {
            this.mEditor.fullScreen();
        });

    },
    methods: {
        copy: function(content, message) {
            var aux = document.createElement("input");
            aux.setAttribute("value", content);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
            if (message == null) {
                alert("复制成功");
            } else {
                alert(message);
            }
        },
        openPannel: function(whichPannel, index) {
            this.whichShow = 1;
            this.whichPannel = whichPannel;
            if(arguments.length == 2) {
                this.index = index;
            }
            if (whichPannel == 2) {
                this.isShow = true;
            }
            if (whichPannel == 1) {
                this.mTitle = this.articles[index].title;
                this.mSlug = this.articles[index].slug;
                this.mCheckedList = this.articles[index].belong;
                this.mEditor.txt.html(this.articles[index].text);
                this.mEditor.config.uploadImgParams = {
                    content_id: this.articles[index].id
                }
            }
        },
        closePannel: function() {
            this.whichShow = 0;
            this.isShow = false;
        },
        getJP: function(e) {
            this.slug = Pinyin.GetJP(this.title);
        },
        getMJP: function(e) {
            this.mSlug = Pinyin.GetJP(this.mTitle);
        },
        getArticle: function(that) {
            axios.get(that.$host + 'getArticle.php', {
                    params: { 'belong': 'order' }
                })
                .then(function(response) {
                    if (parseInt(response.data.code) == 0) {
                        that.articles = response.data.data || [];
                    }
                }).catch(function(err) {
                    console.log(err);
                });
        },
        getList: function(that) {
            axios.get(that.$host + 'getList.php', {
                    params: { 'belong': 'order' }
                })
                .then(function(response) {
                    if (parseInt(response.data.code) == 0) {
                        that.lists = response.data.data;
                    }
                }).catch(function(err) {
                    console.log(err);
                });
        },
        deleteArticle: function(index) {
            if (confirm(`是否要删除文章[${this.articles[index].title}]？`)) {
                axios({
                    method: 'post',
                    url: this.$host + 'delArticle.php',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data: Qs.stringify({
                        id: this.articles[index].id
                    })
                }).then(response => {
                    if (response.data.code == 0) {
                        this.articles.splice(index, 1);
                    } else {
                        alert(`${this.articles[index].title}删除失败：${response.data.msg}`);
                    }
                }).catch(err => {
                    console.log(err);
                });
            }
        },
        nextStep: function() {
            if (this.title == '') {
                this.addMsg = '题目不得为空';
                return;
            }
            if (this.slug == '') {
                this.addMsg = '缩略名不得为空';
                return;
            }
            axios({
                method: 'post',
                url: this.$host + 'addArticle.php',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify({
                    title: this.title,
                    slug: this.slug,
                    checked: this.checkedList
                })
            }).then(response => {
                if (response.data.code == 0) {
                    this.articleId = response.data.data.id;
                    this.articles.unshift(response.data.data);
                    this.addMsg = `${response.data.data.title}添加成功`;
                    this.editor.config.uploadImgParams = {
                        content_id: this.articleId
                    }
                    this.whichPannel = 3;
                } else {
                    this.addMsg = response.data.msg;
                }
            }).catch(err => {
                console.log(err);
            });
        },
        publish: function(type) {
            axios({
                method: 'post',
                url: this.$host + 'updateArticle.php',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify({
                    id: this.articleId,
                    type: type,
                    text: this.editor.txt.html()
                })
            }).then(response => {
                if (response.data.code == 0) {
                    this.articles[this.articleIndex]['text'] = this.editor.txt.html();
                    this.articles[this.articleIndex]['type'] = type;
                    if (parseInt(type) == 0) {
                        this.addMsg = `文章发布成功`;
                    } else {
                        this.addMsg = `文章已保存为草稿`;
                    }
                    this.$options.methods.closePannel.apply(this);
                } else {
                    this.addMsg = response.data.msg;
                }
            }).catch(err => {
                console.log(err);
            });
        },
        delAttachment: function(idx) {
            axios({
                method: 'post',
                url: this.$host + 'delAttachment.php',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify({
                    id: this.articles[this.index].attachments[idx].id,
                })
            }).then(response => {
                if (response.data.code == 0) {
                    this.articles[this.index].attachments.splice(idx, 1);
                } else {
                    alert(response.data.msg);
                }
            }).catch(err => {
                console.log(err);
            });            
        },
        updateArticle: function(type) {
            let index = this.index;
            if (this.mTitle == '') {
                this.updateMsg = '题目不得为空';
                return;
            }
            if (this.mSlug == '') {
                this.updateMsg = '缩略名不得为空';
                return;
            }
            let tempData = {
                id: this.articles[index].id,
                type: type,
            };
            if(this.mTitle != this.articles[index].title) {
                tempData['title'] = this.mTitle;
            }
            if(this.mSlug != this.articles[index].slug) {
                tempData['slug'] = this.mSlug;
            }
            if(this.mCheckedList.length == 0) {
                tempData['checked'] = 'none';
            }else if(this.mCheckedList.sort(function(a, b){return a - b}).toString() != this.articles[index].belong.sort(function(a, b){return a - b}).toString()) {
                tempData['checked'] = this.mCheckedList;
            }
            if(this.mEditor.txt.html() != this.articles[index].text) {
                tempData['text'] = this.mEditor.txt.html()
            }
            axios({
                method: 'post',
                url: this.$host + 'updateArticle.php',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify(tempData)
            }).then(response => {
                if (response.data.code == 0) {
                    this.articles[index] = response.data.data;
                    this.updateMsg = `修改成功`;
                    this.$options.methods.closePannel.apply(this);
                } else {
                    this.updateMsg = response.data.msg;
                }
            }).catch(err => {
                console.log(err);
            });                 
           
        }
    }
}